<template>
  <div>
    <div class="echarts">
      <div :style="{ height: '800%', width: '100%' }" id="centerMap"></div>
    </div>
  </div>
</template>
<script>
import echarts from "echarts";
import JSON from "$ui/charts/geo/city/420700.json";
export default {
  name: "echarts",
  data() {
    return {
      mapOption: {
        //标题内容
        title: {
          text: "鄂州市各区案件分布图 ",
        },
        //鼠标移入时显示的内容
        tooltip: {
          trigger: "item",
          formatter: "{b}<br/>{c} (p / km2)",
        },
        //左下角显示内容高低
        visualMap: {
          min: 100,
          max: 5000,
          text: ["高", "低"],
          realtime: false,
          calculable: true,
          inRange: {
            color: ["lightskyblue", "yellow", "orangered"],
          },
        },
        geo: {
          map: "鄂州市",
          label: {
            emphasis: {
              show: false,
            },
          },
          itemStyle: {
            normal: {
              areaColor: "#323c48",
              borderColor: "#111",
            },
            emphasis: {
              areaColor: "#2a333d",
            },
          },
        },
        series: [
          // {
          //   type: "map", //图标类型
          //   mapType: "鄂州市", // 自定义扩展图表类型
          //   name: "鄂州市各区案件完成数量对比",
          //   label: {
          //     show: true,
          //   },
          //   //用于修改正常显示地图颜色边框等内容
          //   normal: {
          //     borderWidth: 5,
          //     borderColor: "#e1e1e1",
          //     color: "#90c31d",
          //     opacity: 0.8,
          //   },
          //   //用于修改鼠标移入时地图颜色边框等内容
          //   emphasis: {
          //     borderWidth: 5,
          //     borderColor: "red",
          //     areaColor: "#749f83", //修改移入时地图颜色
          //   },
          //   data: [
          //     { name: "鄂城区", value: 2057.34 },
          //     { name: "梁子湖区", value: 1577.48 },
          //     { name: "华容区", value: 386.1 },
          //   ],
          // },
          {
            name: "散点图",
            type: "effectScatter",
            // coordinateSystem: "geo",
            // 把散点用图片代替在这里设置
            // symbol:'image://'+this.img,
            // 设置图片大小
            // symbolSize:[30, 20],
            // 设置散点的大小
            symbolSize: 12,
            label: {
              normal: {
                show: false,
              },
              emphasis: {
                show: false,
              },
            },
            itemStyle: {
              emphasis: {
                borderColor: "#fff",
                borderWidth: 1,
              },
            },
            data: [
              {
                value: [114.70284461975099, 30.533285143560821, 0],
                name: "华容区",
                data: [0, 98],
              },
              {
                value: [114.68112945556641, 30.107080761488419, 0],
                name: "梁子湖区",
                data: [0, 60],
              },
              {
                value: [114.88583564758299, 30.394458582600354, 0],
                name: "鄂城区",
                data: [0, 90],
              },
            ],
          },
        ],
      },
    };
  },
  mounted() {
    this.drawMap();
  },
  beforeDestroy() {
    if (!this.chart) {
      return;
    }
    this.chart.dispose();
    this.chart = null;
  },
  methods: {
    drawMap() {
      //地图
      var myChart = echarts.init(document.getElementById("centerMap"));
      echarts.registerMap("鄂州市", JSON, {}); //这个是关键，之前拿到的青州各街道数据
      myChart.setOption(this.mapOption);
    },
  },
};
</script>
